<template>
  <div class="form-group" style="padding-right:30px;">
    <div class="row">
      <div class="col-lg-12">
        <span>店舗条件(MDL)</span>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <label style="font-weight:normal"><input type="radio" name="storeRadio"  value="storeKaisou" v-model="returnStoreType" checked="checked"/>店舗階層</label>
        <label style="font-weight:normal;margin-left:10px;"><input type="radio" name="storeRadio"  value="storeGroup" v-model="returnStoreType" />店舗グループ</label>
      </div>
    </div>
    <div class="row" style="margin-top:5px;">
      <div class="col-lg-12">
        <input
          type="button"
          :value="storeText"
          id="storeButton"
          class="form-control input-sm"
          @click="showStoreModal()"
        />
      </div>
    </div>
    <div class="row" style="margin-top:5px;">
      <div class="col-lg-12">
        <input
          type="button"
          :value="storeGrpText"
          id="storeGrpBtn"
          class="form-control input-sm"
          @click="showStoreGrpModal()"
        />
      </div>
    </div>
    <div style="border-bottom:1px solid #dddddd;margin-top:10px;"></div>
  </div>
</template>

<script>
// import storeModule from "store";
import storeGrpModule from "group";

export default {
  name: "menuStoreComponent",
  data: function() {
    return {
      // store_instance: new storeModule(window.$),
      storeText: "店舗選択",
      storeGrp_instance : new storeGrpModule(window.$),
      storeGrpText : "店舗選択"
    };
  },
  props: {
    store: {
      type: Object
    },
    company: {
      type: String
    },
    mast: {
      type: Object
    },
    isfav: {
      type: Object
    }
  },
  methods: {
    //显示店铺插件
    showStoreModal() {
      this.store_instance.show();
    },
    //显示店铺グループ
    showStoreGrpModal() {
      this.storeGrp_instance.show();
    },
    /**
     * 初始化店铺插件
     */
    // initStoreModule() {
    //   var vm = this;
    //   var storeModuleParam = {
    //     usercd: global.userCd,
    //     elementId: "storeButton",
    //     tab: "1-1",
    //     level: "s-b-t",
    //     option: "1-1-1",
    //     callback: {
    //       afterSelectedOK: function() {
    //         vm.store.value = vm.store_instance.getStoresFav();
    //         vm.store.type = vm.store_instance.getStoreType();
    //       }
    //     }
    //   };
    //   if (this.mast.type === "company") {
    //     storeModuleParam.kigyoucd = this.company;
    //   } else {
    //     storeModuleParam.kigyoucd = global.suntoryCd;
    //     storeModuleParam.isCoreKigyo = "1";
    //     storeModuleParam.subkigyoucds = this.company;
    //   }
    //   storeModuleParam.mstclass = this.mast.value;
    //   if (this.store.time !== "") {
    //     var timeArr = this.store.time.toString().split("~");
    //     storeModuleParam.startTime = timeArr[0];
    //     storeModuleParam.endTime = timeArr[1];
    //     storeModuleParam.timeType = this.store.timeType;
    //   } else {
    //     var yTimeDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
    //     var yTime =
    //       "" +
    //       yTimeDate.getFullYear() +
    //       (yTimeDate.getMonth() + 1) +
    //       (yTimeDate.getDate().toString().length < 2
    //         ? "0" + yTimeDate.getDate()
    //         : yTimeDate.getDate());
    //     storeModuleParam.startTime = yTime;
    //     storeModuleParam.endTime = yTime;
    //     storeModuleParam.timeType = "M";
    //   }
    //   this.store_instance.init(storeModuleParam);
    // },
    /**
     * 初始化店铺Grp插件
     */
    initStoreGrpModal() {
      // var vm = this;
      var storeGrpModuleParam = {
        usercd: "10154057",
        elementId: "storeGrpBtn",
        groupFlg:'store',
        level: "1-1-1",
        moduleType: "one"
      };
      // if (this.store.time !== "") {
      //   var timeArr = this.store.time.toString().split("~");
      //   storeGrpModuleParam.startTime = timeArr[0];
      //   storeGrpModuleParam.endTime = timeArr[1];
      //   storeGrpModuleParam.timeType = this.store.timeType;
      // } else {
      //   var yTimeDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
      //   var yTime =
      //     "" +
      //     yTimeDate.getFullYear() +
      //     (yTimeDate.getMonth() + 1) +
      //     (yTimeDate.getDate().toString().length < 2
      //       ? "0" + yTimeDate.getDate()
      //       : yTimeDate.getDate());
      //   storeGrpModuleParam.startTime = yTime;
      //   storeGrpModuleParam.endTime = yTime;
      //   storeGrpModuleParam.timeType = "M";
      // }
      this.storeGrp_instance.init(storeGrpModuleParam);
    }
  },
  computed: {
  },
  watch: {
    listenChange(newValue, oldValue) {
      if (this.isfav.store) {
        this.initStoreModule();
        this.isfav.store = false;
      } else {
        if (
          newValue.company !== oldValue.company ||
          newValue.mast.type !== oldValue.mast.type ||
          newValue.mast.value !== oldValue.mast.value
        ) {
          this.initStoreModule();
          this.store.value = [];
        }
      }
    },
    "store.time"() {
      var times = this.store.time.toString().split("~");
      this.store_instance.setTime({
        start: times[0],
        end: times[1],
        type: this.store.timeType
      });
    },
    "store.timeType"() {
      var times = this.store.time.toString().split("~");
      this.store_instance.setTime({
        start: times[0],
        end: times[1],
        type: this.store.timeType
      });
    },
    "store.value"() {
      if (
        this.store.value.join(",") !==
        this.store_instance.getStoresFav().join(",")
      ) {
        this.store_instance.setStores({
          storeArr: this.store.value,
          type: this.store.type
        });
      }
    }
  },
  mounted() {
    // this.initStoreModule();
    this.initStoreGrpModal();
  }
};
</script>